我正在使用Bootstrap和Wordpress制作一个网站。这是一个2列布局-左侧边栏,右侧内容。正确的内容是动态的,并通过无限滚动进行扩展。我尝试通过多种技术使左侧边栏的高度达到100%,但无济于事。我希望侧边栏根据视口(viewport)的大小/右侧内容div的高度继续向下。我做了一个简单的fiddle:http://jsfiddle.net/ydPMr/3但如果你在我的开发页面上看到我在说什么就更好了:http://joshuawalker.koding.com.这是我的页面的基本结构:如果有人对如何使侧边栏拉伸(stretch)到全高有任何想法,我将不胜感激。谢谢!
关于此问题还有另一个问题(hidescrollbarandshowonhoverlikefacebooksnewchatsidebar),但我对他们如何实现滚动条的样式感兴趣。我只有一个猜测,那就是他们将自己的div放在滚动条所在的位置,从而隐藏它并简单地让他们自己的“抓手”跟随滚动条高度。我需要向固定位置的div添加垂直滚动,如果有人知道一个好的插件(或者可以告诉我如何制作自己的插件)来实现这一点,我会很高兴听到他们的消息。谢谢 最佳答案 有一个jQuery插件专门用于此,请查看http://rocha.la/jQuery-sli
我正在使用Twitterbootstrap开发应用程序。2列布局。一个侧边栏和主要内容。以下是布局。单击内容中的链接时,我想隐藏侧边栏和占据整个页面的内容。目前我设法做到了这一点,$(document).ready(function(){$(window).resize(function(){plot();});$('.toggles').click(function(){$('.target').toggle('fast',function(){$('.contents').toggleClass('span12'),$('.contents').toggleClass('span9
更新2所以当#main中的内容增加时,它应该下推页脚,如下所示:...所以页脚不应该是position:fixed;。当内容不足时应在底部,当内容多于页面高度时应下推。在这两种情况下,#sidebar都需要跨越从#header底部到#footer顶部的高度。更新一些残酷的细节......只要页面上的内容很小,页脚就应该在底部,但是当内容足够大时,它应该将页脚向下推(这是粘性页脚链接中描述的功能我已经提供了)。我需要侧边栏始终位于页眉和页脚之间的全高(从页眉底部到页脚顶部)。这对我来说是个挑战。想法...?我正在尝试不使用JavaScript来使这个布局工作...这就是我在图片形式中的意
我想在row中有5列,对于宽度小于480像素的小型设备屏幕只有1列。我是zurbfoundation的新手,仍在学习它。fiddle示例http://jsfiddle.net/V7TuY/1/这种东西用列好还是用列表好ulli 最佳答案 Thefoundationgridisbasedon12"units"perrow.在您的示例中,您有5与类medium-3和large-3=每行15个单位。Foundation将设法将前4个放入(4*3=12个单位),然后将第五个推到下面的行。适合您的5件元素的一个想法是给所有元素都赋予mediu
我正在尝试使用Flexbox构建“chalice”布局。固定标题固定、可折叠、可滚动的左侧导航灵活内容区固定、可折叠、可滚动的右侧导航见下文:除了标题下方“应用程序”区域的高度外,我一切正常。现在它是100vh(视口(viewport)高度的100%),但这包括64px标题。我尝试了calc(100vh-64px),但这与flex的配合并不好。这是我的基本HTML结构:LeftNavContentRightNav和支持的CSS:main{display:flex;flex-direction:column;}header{z-index:0;flex:0064px;display:fl
我想制作这样一个网页:|----------------------------||header||----------------------------||L|||e|||f|||t||||||S|ContentArea||i|||d|||e|||b|||a|||r|||----------------------------|标题的高度是固定的,但它的宽度应该是动态的。左侧边栏应具有固定宽度和动态高度。对于内容区域,高度和宽度都是动态的。当用户缩放他们的浏览器时,滚动条不应该出现(没有设置overflow:hidden;来隐藏它。)。我试过这样写代码:TOPLEFTMAIN使用C
我正在尝试设置如下所示的布局:我想为该元素使用TwitterBootstrap,但我知道这可能不是获得像这样的基本布局的最佳方式。我知道如何将页眉和页脚设置为固定在顶部和底部,但我很难让侧边栏宽度恒定且可独立滚动。我当前的实现在这里:http://jsfiddle.net/Mwkrw/3/.我尝试使用Fixedsidebarnavigationinfluidtwitterbootstrap2.0设置固定侧边栏以及关于堆栈溢出的其他几个类似答案,但当侧边栏比内容长时,它们都会中断,据我所知,没有办法给它一个独立的滚动。理想情况下,我希望使用纯css来执行此操作——没有javascript
所以我一直在寻找这方面的指导,但无济于事。基本上,我只想有一个侧边栏,但是当屏幕变小时,也就是智能手机屏幕变小,它就会变成导航栏。我的侧边栏HTML代码是这样的:-->AnimaciónIlustraciónInteracciónBlogAcercaContacto我的CSS:#fixed-sidebar{position:fixed;max-width:20%;color:white;}我不知道如何将其放入导航栏中。我所知道的是如何从一开始就制作导航栏,但我不想那样做!我不想要任何花哨的动画叠加多色Accordion式的东西,拜托-谢谢你:) 最佳答案
我正在使用Foundation'soff-canvasnavigation,尝试进行占据设备整个高度的导航。默认情况下,菜单选项的高度由所显示内容的高度决定。这意味着如果您的内容小于菜单项的高度,您的菜单项将不可见。我希望菜单和内容部分的高度都固定在设备的高度。仅在需要时滚动内容部分。将内容区域的高度和最小高度设置为100%似乎没有任何效果-仅使用固定高度,例如500px会改变高度-但这是不可缩放的。这是如何实现的?如果我给'.inner-wrap'一个固定的高度,整个事情就会调整。如何确保.inner-wrap占据设备的整个高度?Labellinklinklinkblahblahte